@import '../../../core/index.less';
.orin-sw-retips-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    &:hover {
        .orin-sw-retips-box {
            opacity: 1;
            &.top {
                transform: scale(1) translate3d(-50%, -100%, 0);
            }
            &.bottom {
                transform: scale(1) translate3d(-50%, 100%, 0);
            }
            &.left {
                transform: scale(1) translate3d(-100%, -50%, 0);
            }
            &.right {
                transform: scale(1) translate3d(100%, -50%, 0);
            }
        }
    }
    .orin-sw-retips-box {
        position: absolute;
        display: inline-block;
        opacity: 0;
        transform: scale(0);
        transition: opacity .3s;
        width: auto;
        height: auto;
        background-color: rgba(0, 0, 0, @maskAlpha);
        border-radius: @borderRadius;
        color: @white;
        padding: 5/@remScale 8/@remScale;
        word-break: keep-all;
        white-space: nowrap;
        font-size: 12/@remScale;
        &:after {
            position: absolute;
            content: '';
            display: block;
        }
        &.bottom {
            bottom: -10/@remScale;
            left: 50%;
            &:after {
                border-left: 6/@remScale solid transparent;
                border-right: 6/@remScale solid transparent;
                border-bottom: 6/@remScale solid rgba(0, 0, 0, @maskAlpha);
                top: 0;
                left: 50%;
                transform: translate3d(-50%, -100%, 0);
            }
        }
        &.left {
            top: 50%;
            left: -10/@remScale;
            &:after {
                border-top: 6/@remScale solid transparent;
                border-bottom: 6/@remScale solid transparent;
                border-left: 6/@remScale solid rgba(0, 0, 0, @maskAlpha);
                right: 0;
                top: 50%;
                transform: translate3d(100%, -50%, 0);
            }
        }
        &.top {
            top: -10/@remScale;
            left: 50%;
            &:after {
                border-left: 6/@remScale solid transparent;
                border-right: 6/@remScale solid transparent;
                border-top: 6/@remScale solid rgba(0, 0, 0, @maskAlpha);
                bottom: 0;
                left: 50%;
                transform: translate3d(-50%, 100%, 0);
            }
        }
        &.right {
            top: 50%;
            right: -10/@remScale;
            &:after {
                border-top: 6/@remScale solid transparent;
                border-bottom: 6/@remScale solid transparent;
                border-right: 6/@remScale solid rgba(0, 0, 0, @maskAlpha);
                left: 0;
                top: 50%;
                transform: translate3d(-100%, -50%, 0);
            }
        }
    }
}

.theme-dark {
    // .orin-sw-retips-root {
    //     .orin-sw-retips-box {
    //         background-color: @dark_bgBlackColor8;
    //         border-radius: @dark_borderRadius;
    //         color: @dark_fontHighlightColor;
    //         &.bottom {
    //             &:after {
    //                 border-bottom: 6/@remScale solid @dark_bgBlackColor8;
    //             }
    //         }
    //         &.left {
    //             &:after {
    //                 border-left: 6/@remScale solid @dark_bgBlackColor8;
    //             }
    //         }
    //         &.top {
    //             &:after {
    //                 border-top: 6/@remScale solid @dark_bgBlackColor8;
    //             }
    //         }
    //         &.right {
    //             &:after {
    //                 border-right: 6/@remScale solid @dark_bgBlackColor8;
    //             }
    //         }
    //     }
    // }
}
